<template>
  <page-layout>
    <both-ends style="height: 100%;">
      <el-card class="box-card box-card-savitar roleBox">
        <div slot="header" class="clearfix">
          <span>角色列表</span>
        </div>
        <el-form inline>
          <el-form-item label="角色名称/描述">
            <el-input size="small" v-model="roleQuery.name"></el-input>
          </el-form-item>
          <el-form-item>
            <primary-button @click.native="loadRole">查询</primary-button>
          </el-form-item>
        </el-form>
        <table-data :table-data="rolelist" :show-opt="false" height="calc(100%)"
                    :columns="columns" @current-change="currentChange"></table-data>
        <div class="page__container">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange" :page-size="roleQuery.pageSize"
                         layout="total, prev, pager, next" :total="roleTotal">
          </el-pagination>
        </div>
      </el-card>
      <el-card class="box-card box-card-savitar menuBox">
        <div slot="header" class="clearfix">
          <span>菜单列表</span>
        </div>
        <el-tree
          :data="menuTree" show-checkbox ref="tree"
          node-key="pkId" default-expand-all
          :props="defaultProps">
        </el-tree>
        <div class="menuBox__footer">
          <primary-button @click.native="doSave">保存</primary-button>
        </div>
      </el-card>
    </both-ends>
  </page-layout>
</template>

<script>
import PageLayout from '@/components/PageLayout'
import BothEnds from '@/components/Layout/BothEnds'
import {page as rolePage} from '@/api/role'
import {tree, listMenuIdByRole, createRole2Menu} from '@/api/menu'
import {PrimaryButton} from "@/components/Form"
import TableData from "@/components/TableData/TableData";
import ResultMixin from '@/mixins/resultMixin'

export default {
  components: {TableData, PageLayout, BothEnds, PrimaryButton},
  mixins: [ResultMixin],
  data() {
    return {
      roleQuery: {
        pageNum: 1,
        pageSize: 20,
        name: ''
      },
      rolelist: [],
      roleTotal: 0,
      columns: [
        {label: '角色名称', prop: 'name'},
        {label: '角色描述', prop: 'noteDesc'},
        {label: '排序', prop: 'orderNum'},
        {label: '创建人', prop: 'createdBy'},
        {label: '创建时间', prop: 'createdTime', type: 'date'},
      ],
      currentRole: null,
      menuTree: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
    }
  },
  component: {},
  computed: {},
  watch: {},
  methods: {
    handleSizeChange(val) {
      this.roleQuery.pageSize = val
      this.loadRole()
    },
    handleCurrentChange(val) {
      this.roleQuery.pageNum = val
      this.loadRole()
    },
    loadRole() {
      rolePage(this.roleQuery).then(res => {
        this.rolelist = res.result.records
        this.roleTotal = res.result.total
      })
    },
    loadTree() {
      tree().then(res => {
        this.menuTree = res.result
      })
    },
    currentChange(row) {
      this.currentRole = row
      this.$refs.tree.setCheckedKeys([], true)
      listMenuIdByRole(row.pkId).then(res => {
        res.result.forEach(p => {
          let node = this.$refs.tree.getNode(p);
          if (!node) return
          if (node.isLeaf) {
            this.$refs.tree.setChecked(node, true)
          }
        })
      })
    },
    doSave() {
      //获取全部选择的keys
      let arr = this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys())
      createRole2Menu(this.currentRole.pkId, arr).then(res => {
        console.log(res);
        this.ok(res, '保存', () => {
        })
      })
    }
  },
  mounted() {
    this.loadRole()
    this.loadTree()
  }
}
</script>

<style lang="scss">
.box-card-savitar {
  width: calc(50% - 7px);
}

.roleBox {
  .el-card__body {
    height: calc(100% - 55px - 110px);
  }
}

.menuBox {
  .el-card__body {
    height: calc(100% - 55px);

    .el-tree {
      height: calc(100% - 55px);
    }
  }

  &__footer {
    height: 55px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }
}
</style>
